<template>
	<view id="Certification">
		
	        <view class="tilte">实名认证</view>
	        <view class="tilte2">信息仅用于身份验证、借还款服务</view>
	        <view class="name">姓名</view>
	        <input
	            class="nameInput"
	            placeholder="请输入姓名"
	            type="text"
	            v-model="from.idcardName"
	        />
	        <view class="name">本人的身份证号码</view>
	        <input
	            class="nameInput"
	            placeholder="请输入您的身份证号码"
	            type="text"
	            v-model="from.idcard"
	        />
	        <view class="fuJIA" v-show="shengfenzhengs">身份证号码错误</view>
	
	        <view class="name">设置交易密码</view>
	        <input
	            class="nameInput"
	            placeholder="请输入6位数交易密码"
	            type="text"
	            v-model="from.payPassword"    
	            :password="true"
	        />
	        <view class="fuJIA" v-show="Password">交易密码必须是6位数字</view>
	
	        <button type="primary" @click="btns">完成绑定</button>
	
	        <view class="dingwei">
	            <image
	                class="lift"
	                src="https://z3.ax1x.com/2021/04/09/cNwCxx.png"
	            ></image>
	            <text>信息已加密，保障您的财产安全</text>
	        </view>
	    </view>
</template>

<script>
	import {createNamespacedHelpers}from 'vuex'
	const {mapActions,mapState} = createNamespacedHelpers('UserInfor')
	export default {
		onLoad() {
			console.log(this.userData);
			this.from.username=this.userData.username
		},
	    data() {
	        return {
	            from: {
	                idcard: "", //身份证号
	                idcardName: "", //真实姓名
	                payPassword: "", //支付密码
	                username: "", //用户账号
	            },
	            Password: false,
	            shengfenzhengs: false,
	        };
	    },
		computed:{
			...mapState(['userData','userPass'])
		},
	    methods: {
			...mapActions(['certificationData','getUser']),
			
	        async btns() {
				if(RegExp('^5[0-9a-zA-Z]{17}$').test(this.from.idcard)==false){
					this.shengfenzhengs=true
				}else if(RegExp('^[0-9a-zA-Z]{6}$').test(this.from.payPassword)==false){
					this.shengfenzhengs=false
					this.Password=true
				}else{
					this.Password=false
					const data=await this.certificationData(this.from)
					// console.log(data);
					if(data.code==1000){
						uni.showToast({
							icon:'none',
						    title: '请输信息有误',
						    duration: 2000
						});
					}else if(data.code==606){
						uni.showToast({
							icon:'none',
						    title: '实名认证失败!',
						    duration: 2000
						});
					}else if(this.userData.idcard==this.from.idcard){
						uni.showToast({
						    title: '此用户已经实名',
						    duration: 2000
						});
					}else if(data.code==200){
						const userdata =await this.getUser({
							username:this.userData.username,
							password:this.userPass
						})
						if(userdata.code==200){
							uni.redirectTo({
								url:'/pages/certification/certification'
							})
						}
					}
				}
	          
	        }
	    },
	};
</script>

<style lang="scss" scoped>
#Certification {
    width: 90%;
    margin: 0 auto;
    margin-top: 10rpx;

    .tilte {
        font-size: 40rpx;
        color: #222;
        font-weight: 600;
        margin: 10rpx 0 20rpx;
    }

    .tilte2 {
        font-size: 28rpx;
        color: #999;
    }

    .name {
        font-size: 28rpx;
        color: #999;
        margin-top: 60rpx;
    }

    .nameInput {
        margin-top: 10rpx;
        padding: 18rpx 0;
        border-bottom: 1px solid #c9c9c9;
    }

    input[type="text"]:-ms-input-placeholder {
        /* Internet Explorer 10+ */
        font-size: 34rpx;
        color: #999;
    }

    .fuJIA {
        font-size: 24rpx;
        color: #ff171a;
        
        margin-top: 12rpx;
    }

    .box1 {
        padding: 30rpx 0;
        background-color: #f4f8ff;
        border-radius: 16rpx;
        text-align: center;
        margin-bottom: 30rpx;

        image {
            width: 398rpx;
            height: 272rpx;
        }
    }

    .text {
        font-size: 28rpx;
        color: #868686;
        text-align: center;
        margin-top: 50rpx;
    }

    button {
        background-color: #3476F1;
        height: 88rpx;
        line-height: 88rpx;
        margin: 0 auto;
        margin-top: 250rpx;
        position: absolute;
        bottom: 120rpx;
        // left: 0;
        width: 90%;
    }

    .dingwei {
        position: fixed;
        bottom: 40rpx;

        color: #868686;
        font-size: 20rpx;
        text-align: center;
        width: 100%;

        .lift {
            width: 22rpx;
            height: 26rpx;
            vertical-align: middle;
            margin-right: 14rpx;
        }
    }
}
</style>
